<template>
  <div>
    <div class="header-select">
      <el-input class="input" placeholder="请输入用户名" prefix-icon="el-icon-search" v-model="userNameSerch"
        clearable></el-input>
      <el-input class="input" placeholder="请输入手机号" prefix-icon="el-icon-search" v-model="phoneSerch"
        clearable></el-input>

      <el-select style="width: 150px;" clearable v-model="genderSerch" placeholder="请选择性别">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-button class="btn" type="danger" round @click="batchDelete()">批量删除
        <i class="el-icon-delete el-icon--right"></i>
      </el-button>
      <el-button class="btn" type="primary" round @click="creatDrawer = true">添加管理员
        <i class="el-icon-user el-icon--right"></i>
      </el-button>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table ref="multipleTable" :data="tableData" border style="width: auto">
        <el-table-column type="selection" />
        <el-table-column prop="userName" label="用户名" width="200px"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="200px"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="200px"></el-table-column>
        <el-table-column label="性别" width="100px">
          <template slot-scope="scope">
            <span>{{scope.row.gender==0?'男':'女'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色" width="100px">
          <template slot-scope="scope">
            <span>{{scope.row.fole== 0 ?'管理员':'用户'}}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="150px">
          <template slot-scope="scope">
            <span>{{scope.row.state== 'UN_CENCEL' ?'未注销':'已注销'}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button @click="preview(scope.row)" type="text" size="small">查看</el-button> -->
            <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 修改用户信息弹窗 -->
    <!-- <el-dialog title="修改用户信息" :visible.sync="dialog" width="30%">
      
    </el-dialog> -->

    <el-drawer title="修改用户信息" :visible.sync="dialog" direction="rtl">
      <el-form status-icon ref="userInfo" label-width="100px" class="update-userInfo">
        <el-form-item label="用户名：">
          <el-input v-model="userName"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input type="password" show-password v-model="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="email"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="gender" label="0">男</el-radio>
          <el-radio v-model="gender" label="1">女</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="doUpdate">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="添加管理员" :visible.sync="creatDrawer" direction="rtl">
      <el-form status-icon ref="addUserInfo" label-width="100px" class="update-userInfo">
        <el-form-item label="用户名：">
          <el-input v-model="addUserName" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input type="password" show-password v-model="addPassword" autocomplete="off"
            style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="addPhone" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="addEmail" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="addGender" label="0">男</el-radio>
          <el-radio v-model="addGender" label="1">女</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="creatDrawer = false">取 消</el-button>
          <el-button type="primary" @click="creatUser">确 定</el-button>
        </el-form-item>
      </el-form>

    </el-drawer>

  </div>
</template>

<script>
  import apiUrl from '@/api/url'
  import link from '@/api/Link'
  import router from "@/router"
  import sizeTostr from '@/util/FileSizeUtil'
  import DownloadFile from '@/components/DownLoadFile.vue'
  import UpdateFile from '@/components/UpdateFile.vue'
  import MainHeader from '@/components/MainHeader.vue'
  export default {
    name: 'AdminManage',
    components: {

    },
    data () {
      return {
        pageSize: 5,
        pageSizes: [10, 15, 20, 30],
        currentPage: 1,
        total: 0,
        tableData: [],

        options: [{
          value: '0',
          label: '男'
        }, {
          value: '1',
          label: '女'
        }],
        genderSerch: '',
        userNameSerch: '',
        phoneSerch: '',

        dialog: false,
        userName: '',
        password: '',
        phone: '',
        gender: '',
        email: '',
        userId: '',

        creatDrawer: false,
        addUserName: '',
        addPassword: '',
        addPhone: '',
        addGender: '0',
        addRole: '0',
        addEmail: '',

      }
    },
    methods: {
      //初始化
      init () {

        let data = {
          userName: this.userNameSerch,
          phone: this.phoneSerch,
          gender: this.genderSerch,
          role: 0
        }

        link(apiUrl.baseUrl + '/sys/user/findByPage/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code == 0) {
            this.total = ok.data.data.total
            this.tableData = ok.data.data.users
          } else {
            this.$message.error('数据请求失败：' + ok.data.msg)
          }
        })

      },

      //分页监控
      handleCurrentChange (val) {
        this.currentPage = val
        this.init()
      },
      //分页监控
      handleSizeChange (val) {
        this.pageSize = val;
        this.init()
      },
      //搜索按钮
      search () {
        this.init()
      },
      //批量删除
      batchDelete () {
        let ids = []
        let selection = this.$refs.multipleTable.selection;

        for (let index = 0; index < selection.length; index++) {
          const element = selection[index];
          ids.push(element.id)
        }

        if (ids.length == 0) {
          this.$message({
            message: "请选择用户",
            type: "warning",
          });
          return
        }
        this.$confirm('此操作将删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          let data = {
            userIds: ids
          }
          link(apiUrl.baseUrl + '/sys/user/batchDeleteUser/v1', 'POST', JSON.stringify(data)).then(ok => {
            if (ok.data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.init()
            } else {
              this.$message({
                message: ok.data.msg,
                type: "error",
              });
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      //修改按钮
      update (row) {
        this.userName = row.userName
        this.password = ''
        this.phone = row.phone + ''
        this.gender = row.gender + ''
        this.userId = row.id + ''
        this.email = row.email
        this.dialog = true
      },
      //执行修改
      doUpdate () {

        let data = {
          userId: this.userId,
          userName: this.userName,
          password: this.password,
          phone: this.phone,
          gender: this.gender,
          email: this.email
        }

        link(apiUrl.baseUrl + '/sys/user/updateUser/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code === 0) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.init()
            this.dialog = false
          } else {
            this.$message.error(ok.data.msg);
          }
        })
      },

      //添加用户
      creatUser () {
        let data = {
          userName: this.addUserName,
          password: this.addPassword,
          role: 0,
          phone: this.addPhone,
          gender: this.addGender,
          email: this.addEmail,
        }
        link(apiUrl.baseUrl + '/sys/user/createAdmin/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code == 0) {
            this.$message({
              message: "创建成功",
              type: "success",
            });
            this.init()
            this.creatDrawer = false
          } else {
            this.$message.error(ok.data.msg);
          }
        })

      },
    },
    mounted () {
      this.init()
    },
    watch: {
      userNameSerch (curVal, oldVal) {
        // 实现input连续输入，只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          // this.getListPOI(curVal);
          this.init()
        }, 300);
      },
      phoneSerch (curVal, oldVal) {
        // 实现input连续输入，只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.init()
        }, 300);
      },
      genderSerch (curVal, oldVal) {
        this.init()
      },
    }
  }
</script>

<style scoped>
  .table {
    margin: 10px;
    /* width: 90%;   */
  }

  .header-select {
    margin: 10px;
    display: flex;
  }

  .btn {
    margin-left: 10px;
  }

  .input {
    width: 150px;
    margin-right: 10px;
  }
</style>